16~69歳の視覚障がい者の 91.7%
インターネットを利用しています。

視覚障がい者のための
Web アクセシビリティ
入門以前

2017年11月25日
障がいのある方への
合理的配慮が求められています。

2016年4月1日
障害を理由とする差別の解消の推進に関する法律(障害者差別解消法)が施行されました。

概要

  1. 何人も、障害者に対して、障害を理由として、差別することその他の権利利益を侵害する行為をしてはならない。
  2. 社会的障壁の除去は、それを必要としている障害者が現に存し、かつ、その実施に伴う負担が過重でないときは、それを怠ることによつて前項の規定に違反することとならないよう、その実施について必要かつ合理的な配慮がされなければならない。

よく分かりませんが
合理的な配慮が要るみたいです。

ちなみにどこかで見たような 5 段階評価表があったりもします

ウェブアクセシビリティ取組確認・評価表のエクセルシート画面キャプチャー
視覚障がい者の Web 利用方法
視覚障がい者の Web 利用方法
全盲

主に音声読み上げソフトを利用

ロービジョン(昔は弱視と呼ばれた)

見え方や見えやすい条件に多様な個人差がある
Web 利用方法も様々

  • 音声読み上げソフトを利用
  • 配色・文字サイズ等を変更して利用(カスタム CSS 等)
  • 画面拡大ソフトを利用
  • 画面解像度を調整
  • ディスプレイにレンズをあてて物理的に拡大
音声読み上げソフト
スクリーンリーダー
PC-Talker141,040 円 (税込)国内シェア 85.3%
JAWS153,360 円 (税込)
NVDA無料オープンソース
ナレーターWindows 標準付属Ctrl + Win + Enter
VoiceOvermacOS, iOS 標準付属
音声ブラウザー
NetReader30,240円 (税込)要 PC-Talker
IBM Home Page Reader販売終了IE 6 まで
ALTAIR (アルティア)無料DL リンク切れ...
[デモ] 音声の読み上げを聴いてみましょう
視覚障がい者を意識したマークアップ
視覚障がい者を意識したマークアップ
  • img 要素に alt 属性(代替テキスト)をつける
  • ページの内容がわかるページタイトルをつける
  • 1 つのページにコンテンツを詰め込み過ぎない
  • サイト内検索機能を提供する
  • フォームコントロール要素にラベルを付ける
  • 意味のあるタグを使う(なんでもかんでも div にしない)
  • 意味のあるリンクテキストにする(悪い例: “こちら”)
  • すべての機能をキーボードから利用できるようにする
  • 色を唯一の情報伝達手段にしない
    (例: エラーを赤で表現するだけでなくエラー的文言も出す)
  • 前景と背景の間に十分なコントラストを提供する
  • 勝手に動きだすコンテンツ(例: カルーセル)には
    止める手段を提供する
  • 無限スクロールを使わない
もっとほしいひとへ

WCAG ヘッダーのキャプチャーWeb Content Accessibility Guidelines (WCAG) 2.0 [日本語訳]

https://waic.jp/docs/WCAG20/Overview.html

Web Content Accessibility Guidelines (WCAG) 2.0

パッと見ハードル高そうな印象を受けるけど文章は割と平易

ガイドライン 1.1 テキストによる代替: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。
ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。

目次ぐらい目を通しても損にはならない

音声読み上げソフトを意識したマークアップ
音声読み上げソフトを意識したマークアップ
こんなときどうしよう
  1. アイコンボタンの意味を音声で説明したいけど画面には説明を出したくない
  2. 見た目を派手にするためだけの要素を読み飛ばしてほしい
  3. 「タブ」など HTML タグにない意味を要素に与えたい
[todo]
1. アイコンボタンの意味を音声で説明したいけど画面には説明を出したくない
<button
  aria-label="お気に入りに追加"
  aria-describedby="favorite-button-description"
>
  <i class="mdi mdi-star"></i>
</button>
<p id="favorite-button-description" style="display: none;">
  選択されている項目をお気に入りに追加します
</p>
[todo]
2. 見た目を派手にするためだけの要素を読み上げてほしくない
<div aria-hidden>この要素は読み上げられません</div>
この要素は読み上げられません
[todo]
3. 「タブ」など HTML タグにない意味を要素に与えたい
<div role="tablist">
  <input name="selectedTab" type="radio" role="tab">タブ1</input>
  <input name="selectedTab" type="radio" role="tab">タブ2</input>
  <input name="selectedTab" type="radio" role="tab">タブ3</input>
</div>

role 属性や aria-* 属性を規定する W3C 勧告

WAIウェイ-ARIAアリア
[todo]
WAI-ARIA

WAI-ARIA のベストプラクティスは
可能な限り WAI-ARIA を使わないこと

[todo]

WAI-ARIA が規定する role (一部)

[todo]

WAI-ARIA が規定する aria 属性(一部)

覚えきれません
覚えきれません
  • コンポーネントライブラリを選ぶ
  • メジャーどころだけ覚える

なるべく使わない方が良いものなので
必死に覚えなくても良いと思います。個人的には。

視覚障がい者を意識した Web コンテンツ
こんなときどうしよう
  • ボット対策したい
    (利用者がボットではなくヒトであることを確認したい)
ボット対策
CAPTCHA (画像認証)

歪んだ文字画像を表示して文字に起こさせることで
利用者が人間であることを確認するツール

CAPTCHA

画像の代わりに音声を文字に起こす CAPTCHA もある

画像だけの CAPTCHA は視覚障がい者の大敵

ボット対策
No CAPTCHA reCAPTCHA

チェックボックスをクリックするだけで
利用者が人間であることを確認するツール

reCAPTCHA

マウスの動きなどから人間か機械かを判断するらしい
画像/音声 CAPTCHA もオプションとして提供される

アクセシビリティチェックツール
アクセシビリティチェックツール
miChecker (エムアイチェッカー)
JIS X 8341-3:2016 (== WCAG 2.0) に基づく
ウェブアクセシビリティ対応の取組を支援するために
総務省が開発
時間があったら miChecker のデモします
インクルーシブデザインについて
インクルーシブデザインについて

最近『インクルーシブデザイン』という言葉を目にします。

『アクセシブル』も『ユニバーサル』も『インクルーシブ』も
「多様な利用者に配慮する」という文脈を形成する意味で
同じように利用されます。

が、『インクルーシブデザイン』という言葉を選ぶときは
「障がい者や高齢者を巻き込んで一緒にデザインする
という意味を込めたり込めなかったりする点に留意が必要です。

インクルーシブデザインの原則
(「Inclusive Design Principles」日本語訳)インクルーシブデザインの原則ページキャプチャー

http://inclusivedesignprinciples.org/ja/

↑ とても読みやすいアクセシビリティガイドラインになっていてオススメ

参考文献

視覚障害者のインターネット利用特性と問題分析:みんなのウェブ

http://barrierfree.nict.go.jp/accessibility/proof/report/blind/index.html

視覚障害者の携帯電話・スマートフォン・タブレット・パソコン利用状況調査2013: 新潟大学学術リポジトリ Nuar

http://dspace.lib.niigata-u.ac.jp/dspace/handle/10191/27807

エー イレブン ワイ[WebA11y.jp]

http://weba11y.jp/

[英語]Tips for Getting Started • WAI

https://www.w3.org/WAI/gettingstarted/tips/

豆知識で終わらせず実践しましょう
(特に自分)